<!-- TeacherCenter.vue -->
<template>
  <div class="teacher-center-container">
    <el-card class="box-card">
      <!-- 顶部信息区域 -->
      <TeacherHeader :teacher-info="teacherInfo" />

      <!-- 主体内容区域 -->
      <div class="teacher-content">
        <!-- 侧边栏菜单 -->
        <TeacherSidebar
            :active-menu="activeMenu"
            @menu-change="handleMenuChange"
        />

        <!-- 右侧内容区域 -->
        <div class="content-main">
          <!-- 个人信息 -->
          <PersonalInfo
              v-if="activeMenu === 'personalInfo'"
              :teacher-info="teacherInfo"
          />

          <!-- 账号设置 -->
          <AccountSettings
              v-else-if="activeMenu === 'accountSettings'"
              :teacher-info="teacherInfo"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TeacherHeader from './components/TeacherHeader.vue'
import TeacherSidebar from './components/TeacherSidebar.vue'
import PersonalInfo from './components/PersonalInfo.vue'
import AccountSettings from './components/AccountSettings.vue'

interface TeacherInfo {
  id: number
  name: string
  avatar: string | null
  registerTime: string
  classCount: number
  school: string
  activityLevel: string
  onlineTime: string
  lastLogin: string
  teacherId: string
  title: string
  specialty: string
  phone: string
  email: string
  studentCount: number
  courses: string
  teachingYears: string
}

const activeMenu = ref('personalInfo')
const teacherInfo = ref<TeacherInfo>({
  id: 0,
  name: '',
  avatar: null,
  registerTime: '--',
  classCount: 0,
  school: '--',
  activityLevel: '--',
  onlineTime: '--',
  lastLogin: '--',
  teacherId: '',
  title: '--',
  specialty: '--',
  phone: '--',
  email: '--',
  studentCount: 0,
  courses: '--',
  teachingYears: '--'
})

// 格式化日期
const formatRegisterTime = (timestamp: string) => {
  if (!timestamp) return '--'
  const date = new Date(timestamp)
  return `${date.getFullYear()}年${date.getMonth() + 1}月`
}

const handleMenuChange = (menuKey: string) => {
  activeMenu.value = menuKey
}

onMounted(() => {
  // 从localStorage加载用户信息
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr)

    // 将接口返回的数据映射到teacherInfo
    teacherInfo.value = {
      id: userInfo.id || 0,
      name: userInfo.name || '--',
      avatar: userInfo.avatar || null,
      registerTime: formatRegisterTime(userInfo.createTime),
      classCount: 3, // 需要从其他接口获取
      school: '北京市第一中学', // 需要从其他接口获取
      activityLevel: '--',
      onlineTime: '--',
      lastLogin: '--',
      teacherId: userInfo.teacherId || '--',
      title: '高级教师', // 需要从teachers表获取
      specialty: userInfo.specialty || '--',
      phone: userInfo.phone || '--',
      email: userInfo.email || '--',
      studentCount: 120, // 需要从其他接口获取
      courses: '数学、几何', // 需要从其他接口获取
      teachingYears: '5年' // 需要计算
    }
  }
})
</script>

<style scoped>
.teacher-center-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.box-card {
  margin: 0 auto;
  max-width: 1200px;
}

.teacher-content {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.content-main {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  min-height: 500px;
}
</style>
